<template>
    <FIPanel class="page-tree" :usePadding="false">
      <div class="page-tree__title">系统菜单列表</div>
      <div class="page-tree__line"></div>
      <el-input
        class="page-tree__search"
        v-model="filterText"
        :prefix-icon="Search"
        style="width: 250px"
        placeholder="请输入"
      />
      <!-- <el-tree
        ref="treeRef"
        style="max-width: 600px"
        :data="treeList"
        :props="defaultProps"
        :highlight-current="true"
        lazy
        :load="loadNode"
        :filter-node-method="filterNode"
        @current-change="onCurrentNodeChange"
      >
        <template #default="{ node }">
          <div
            class="custom-tree-node"
            :class="[{ 'custom-tree-node3': node.level === 3 }, { 'custom-tree-node4': node.level === 4 }]"
          >
            <span class="custom-tree-node-label common-text-ellipsis"> {{ node.label }}</span>
            
          </div>
        </template></el-tree
      > -->
      <!-- <FITree
          :key="treeKey"
          ref="treeDataRef"
          class="tree_box"
          :treeList="treeList"
          :filter-node-method="filterNode"
          :showFilter="true"
          :showCheckbox="false"
          @nodeClick="nodeClick"
          :draggable="true"
        ></FITree> -->
        <el-tree
          :data="treeList"
          :props="defaultProps"
          :check-strictly="false"
          @node-click="handleNodeClick"
          :expand-on-click-node="true"
          :check-on-click-node="false"
          highlight-current
          ref="treeRef"
          node-key="nodeNo"
          class="tree_css"
          :default-expand-all="false"
        >
            <template #default="{ data }">
                <span>{{ data.payload.nodeCname }}</span>
            </template>
        </el-tree>
    </FIPanel>
    <!-- <InfoForm
          class="page-form"
          v-model:type="infoFormType"
          :level="infoFormLevel"
          :node-info="selectedNode"
          @handle-save="handleSave"
          @handle-delete="handleDelete"
        ></InfoForm> -->
  </template>
  <script lang="ts" setup>
  import { reactive, onMounted, ref, watch } from 'vue'
  import FIPanel from '@/components/FIPanel.vue'
  import { apiRequestPost } from '@/api/globalApi.js'
  import { ElTree } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import {apiGetMenu} from '@/api/user'
  import { apiGetmenuMaintQuery } from '@/api/configEnvMaint/index'
  const emit = defineEmits(['on-cell-change','select-single-data'])
  interface Tree {
    projectCname: string
    leaf?: boolean
    loading?: boolean // 添加此行
  }
  const treeList = ref([])
  const filterText = ref('')
  const treeRef = ref<InstanceType<typeof ElTree>>()
  const treeKey = ref(0)
  const defaultProps = {
    children:'subNodes',
    label: (data) => data.payload.nodeCname,
    // disabled:(val,node)=> {
    //     if(!node.data.payload.resourceId) return true
    // }
  }
  
  watch(filterText, (val) => {
    treeRef.value!.filter(val)
  })
  const selectedNode = ref({})
  const selectedNodeObj = ref({})
  const handleNodeClick = (data) => {
    console.log(data,'data56')
    emit('select-single-data',data.nodeNo)
        // let par = {
        //     current:1,
        //     size:50,
        //     treeEname:data.payload.treeEname,
        // }
        // apiGetmenuMaintQuery(par).then((res) => {
        //     if (res.data.success) {
        //         // treeList.value = res.data.data.subNodes
        //     } 
        //     console.log(res,'res789')
        // })
        // .catch((error: any) => {
        //     // 处理错误
        // })
    };
  const onCurrentNodeChange = (e, nodeData) => {
    infoFormType.value = 'info'
    selectedNode.value = e
    selectedNodeObj.value = nodeData
    infoFormLevel.value = nodeData.level
    console.log('selectedNode-----', e, nodeData, infoFormLevel.value)
    emit('on-cell-change', e, nodeData, infoFormLevel.value)
  }
//   const filterNode = (value: string, data: Tree) => {
//     if (!value) return true
//     return data.label.includes(value)
//   }
//   const loadNode = async (node: Node, resolve: (data: Tree[]) => void) => {
//     if (node.level === 0) {
//       return resolve([{ label: '系统平台', nodeEname: 'root' }])
//     }
//     if (node.level === 1) {
//       // 获取项目模块
//       try {
//         apiRequestPost('/rm2/menuMaint/queryNodes', { treeEname: 'root' })
//           .then((res) => {
//             if (res.data.success) {
//               Array.isArray(res.data.data.result) &&
//                 res.data.data.result.forEach((item) => {
//                   // item.label = item.projectCname
//                   item.label = `${item.nodeCname}`
//                   item.leaf = false
//                   item.children = null
//                 })
//               const loadedNodes = res.data.data.result.map((item) => ({
//                 ...item,
//                 // 若有子节点，则不是叶子节点，不设置isLeaf；若无子节点，则是叶子节点
//                 isLeaf: false,
//                 loading: false,
//               }))
  
//               resolve(loadedNodes)
//             } else {
//               resolve([])
//             }
//           })
//           .catch((error: any) => {
//             // 处理错误
//             resolve([])
//           })
//       } catch (error) {
//         resolve([])
//       }
//     } else if (node.level === 2) {
//       // 获取一级级模块
//       try {
//         apiRequestPost('/rm2/menuMaint/queryNodes', { treeEname: node.data.nodeEname })
//           .then((res) => {
//             // state.dataList = res.data.data.result
//             if (res.data.success) {
//               Array.isArray(res.data.data.result) &&
//                 res.data.data.result.forEach((item) => {
//                   // item.label = item.moduleCname1
//                   item.label = `${item.nodeCname}`
//                   item.leaf = false
//                   item.children = null
//                 })
//               const loadedNodes = res.data.data.result.map((item) => ({
//                 ...item,
//                 // 若有子节点，则不是叶子节点，不设置isLeaf；若无子节点，则是叶子节点
//                 isLeaf: false,
//                 loading: false,
//               }))
//               resolve(loadedNodes)
//             } else {
//               resolve([])
//             }
//           })
//           .catch((error: any) => {
//             // 处理错误
//             resolve([])
//           })
//       } catch (error) {
//         resolve([])
//       }
//     } else if (node.level === 3) {
//       // 获取二级模块
//       try {
//         apiRequestPost('/rm2/menuMaint/queryNodes', { treeEname: node.data.nodeEname })
//           .then((res) => {
//             if (res.data.success) {
//               Array.isArray(res.data.data.result) &&
//                 res.data.data.result.forEach((item) => {
//                   // item.label = item.moduleCname2
//                   item.label = `${item.nodeCname}`
//                   item.leaf = true
//                   item.children = null
//                 })
//               const loadedNodes = res.data.data.result.map((item) => ({
//                 ...item,
//                 // 若有子节点，则不是叶子节点，不设置isLeaf；若无子节点，则是叶子节点
//                 isLeaf: true,
//                 loading: false,
//               }))
//               resolve(loadedNodes)
//             } else {
//               resolve([])
//             }
//           })
//           .catch((error: any) => {
//             // 处理错误
//             resolve([])
//           })
//       } catch (error) {
//         resolve([])
//       }
//     }else if(node.level === 4){
//       try {
//         apiRequestPost('/rm2/menuMaint/queryNodes', { treeEname: node.data.nodeEname })
//           .then((res) => {
//             if (res.data.success) {
//               Array.isArray(res.data.data.result) &&
//                 res.data.data.result.forEach((item) => {
//                   // item.label = item.moduleCname2
//                   item.label = `${item.nodeCname}`
//                   item.leaf = true
//                   item.children = null
//                 })
//               const loadedNodes = res.data.data.result.map((item) => ({
//                 ...item,
//                 // 若有子节点，则不是叶子节点，不设置isLeaf；若无子节点，则是叶子节点
//                 isLeaf: true,
//                 loading: false,
//               }))
//               resolve(loadedNodes)
//             } else {
//               resolve([])
//             }
//           })
//           .catch((error: any) => {
//             // 处理错误
//             resolve([])
//           })
//       } catch (error) {
//         resolve([])
//       }
//     }
//   }
    const nodeClick = (val) => {
        // parentOrgId.value = val.value
  // state.query.orgEname = val.orgEname
  // state.query.orgCname = val.label
    // searchFn('query', '', val.value)
    }
  const infoFormType = ref('info')
  const infoFormLevel = ref(1)
    
//   const refreshTreeNode = () => {
//     // useMessage().success('更新成功')
//     let parentId = selectedNodeObj.value?.parent?.id
//     let node = treeRef.value.getNode(parentId)
//     if (node) {
//       setTimeout(() => {
//         node.loaded = false
//         node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
//       }, 1000)
//       // 刷新完成后，重新选中当前节点（如果它仍然存在）
//       const refreshedCurrentNode = treeRef.value.getNode(currentlySelectedNode.id)
//       if (refreshedCurrentNode) {
//         treeRef.value.setCurrentKey(refreshedCurrentNode.key) // 选中当前节点
//       } else {
//         // 如果当前节点不存在（可能已被移除），则尝试选中其父节点
//         treeRef.value.setCurrentKey(node.key) // 选中父节点
//       }
//     }
//   }
  const getTreeData = () =>{
    apiGetMenu({topNode:'root'}).then((res) => {
        if (res.data.success) {
            treeList.value = res.data.data.subNodes
        } 
        console.log(treeList,'treeListtreeList')
      })
      .catch((error: any) => {
        // 处理错误
      })
  }
  defineExpose({
    selectedNode,
    //  internalData, // 导出对象
    onCurrentNodeChange, // 导出方法
    // refreshTreeNode,
  })
  onMounted(() => {
    getTreeData()
  })
  </script>
  <style lang="less" scoped>
  .page-controller {
    // width: 100%;
    // display: flex;
    .page-tree {
      // width: 228px;
      width: 280px;
      //   min-height: calc(100vh - 175px);
      padding: 16px;
      .page-tree__title {
        font-size: 16px;
        color: #303133;
        line-height: 28px;
        text-align: left;
        font-weight: bold;
      }
      .page-tree__line {
        margin: 16px -16px;
        height: 1px;
        background: #e8e8e8;
        width: calc(100% + 32px);
      }
      .page-tree__search {
        margin-bottom: 18px;
      }
      .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 32px;
        padding-right: 5px;
        position: relative;
        &-label {
          width: calc(100% - 20px);
          // width: 100%;
          text-align: left;
          // padding-right: 60px;
        }
        // &-label3 {
        //   width: calc(100% - 50px);
        //   // width: 100%;
        //   text-align: left;
        //   // padding-right: 60px;
        // }
        // &-label4 {
        //   width: calc(100% - 70px);
        //   // width: 100%;
        //   text-align: left;
        //   // padding-right: 60px;
        // }
        &-add {
          position: absolute;
          right: 5px;
          top: 8px;
          color: var(--el-color-primary-light-2);
        }
      }
      .custom-tree-node3 {
        width: calc(100% - 30px);
      }
      .custom-tree-node4 {
        width: calc(100% - 30px);
      }
      ::v-deep(.el-tree-node__content) {
        height: 32px;
        border-radius: 2px;
        .el-tree-node__expand-icon {
          color: #989898;
        }
      }
    }
    .page-form {
      flex: 1;
      margin: 0 20px;
    }
  }
  ::v-deep(.el-dropdown-menu__item) {
    padding: 5px 16px;
    border-radius: 2px;
    margin: 4px;
  }
  </style>
  